<template>
	<view class="home">
		<!-- 计算流量弹窗 -->
		<view class="viewHistory_flow_rate">
			<!-- 测线 -->
			<view class="depth_water">
				<view class="water_a">
					水深：
				</view>
				<view class="water_b">
					<u--input v-model="wD" fontSize="25" border="bottom" placeholder="输入水深" type="digit">
						<view class="water_c">
							m
						</view>
					</u--input>

				</view>
			</view>
			<view class="depth_water">
				<view class="water_a">
					流量：
				</view>
				<view class="water_b">
					<u--input v-model="liusliangnub" fontSize="25" border="bottom" placeholder="输入流量" type="digit">
						<view class="water_c">
							m³/s
						</view>
					</u--input>

				</view>
			</view>
			<view class="depth_water">
				<view class="water_a">
					水量：
				</view>
				<view class="water_b">
					<u--input v-model="waterYield" fontSize="25" border="bottom" placeholder="输入流量"
						type="digit"></u--input>

				</view>
			</view>
			<view class="depth_water">
				<view class="water_a">
					测报人：
				</view>
				<view class="water_b">
					<u--input v-model="informant" fontSize="25" border="bottom" placeholder="输入测报人"></u--input>
				</view>
			</view>
			<!-- 				<view class="" style="margin-bottom: 30rpx;">
				<u-button class="custom-style" @click="saveTrafficFn" text="保存流量" :plain="true" shape="circle"
					color='#00ff00'></u-button>
			</view> -->

			<view class="butflx">
				<u-button @click="trafficuploadTrafficFn" type="primary" text="上报数据" shape="circle"></u-button>
			</view>

			<view class="butflx">
				<u-button @click="hiddenTrafficFn" type="error" text="返回" shape="circle"></u-button>
			</view>
		</view>
		<u-modal :show="showupload" :showCancelButton="true" title="是否保存数据" @cancel="canceluploadFn"
			@confirm="confirmuploadFn"></u-modal>
		<!-- 	<u-picker :show="showupload" :columns="columns" keyName="label" 
			 itemHeight="50"></u-picker> -->
		<!-- 弹窗 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js'
	const SixUniTts = uni.requireNativePlugin("SmallSix-SixUniTts")
	export default {
		data() {
			return {
				surveyStationName: '', //测站名称
				informant: '', // 测报人
				notekeeper: '', // 记录人
				fontSize: '20px',
				urlAlphabet: 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict',
				liusliangnub: 0, //平均总流量
				waterYield: 0, //水量
				wD: 0, //水深
				pointVelocity: [], //测线点流速
				measuringArr: [], //测线数组
				dianfa: 0, //测量几点法
				devList: {}, //设备列表
				showupload: false, //上传弹窗
				columns: [], //选择器
				cezhanObj: {}, //测站信息
			}
		},
		onShow() {},
		onLoad(option) {
			// 测站
			this.dataFormat()
		},
		onUnload() {
			console.log('卸载');
		},
		mounted() {
			// 初始化
		},
		methods: {
			// 弹窗
			toastFn(i) {
				this.$refs.uToast.show({
					type: "error",
					duration: 1500,
					message: i
				});
			},
			// 处理数据格式
			dataFormat() {
				let obj = this.vuex_cezhanInfo
				console.log('仪器', this.vuex_cezhanInfo);
				let elect = {}
				elect = obj.celiugan
				elect.ssId = obj.ssId
				elect.sfsId = obj.sfsId
				elect.fmpId = obj.fmpId
				elect.type = obj.type
				elect.name = obj.name
				elect.cexianlist = obj.celiugan.cexianList
				this.vuexCezhanInfo = elect
				console.log('选择测量仪器', this.toolName);
				console.log('原始数据', obj);
				console.log('格式化数据', elect);
			},

			// 计算后上传
			trafficuploadTrafficFn() {
				this.showupload = true
			},
			// 上传选择设备取消
			canceluploadFn() {
				this.showupload = false
			},
			// 上传选择设备确定
			confirmuploadFn() {
				this.showupload = false
				this.devList.name = this.cezhanObj.name
				this.devList.time = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				this.devList.dianfa = this.dianfa
				this.devList.liusliangnub = this.liusliangnub
				this.devList.wD = this.wD
				// 上传服务器
				let obj = {}
				obj = {
					ssId: this.vuexCezhanInfo.ssId,
					sfsId: this.vuexCezhanInfo.sfsId,
					currentMeterType: 1,
					measuredData: JSON.stringify(this.measuringArr),
					waterFlow: this.liusliangnub,
					depthWater: this.wD,
					measuringMethod: this.dianfa,
					measuringTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm'),
					informant: this.informant,
					notekeeper: this.informant,
					waterYield: this.waterYield,
				}
				this.uploadHistoryFn(obj)
				// 保存本地
				// this.saveTrafficFn()
			},
			// 保存流量
			saveTrafficFn() {
				let day = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				let arr = this.vuex_flowHistory
				let obj = {
					id: this.nanoid(),
					name: this.cezhanObj.name,
					time: day,
					dianfa: this.dianfa,
					liusliangnub: this.liusliangnub,
					wD: this.wD,
					measuringArr: this.measuringArr,
					waterYield: this.waterYield,
				}
				arr.unshift(obj)
				uni.$u.vuex('vuex_flowHistory', arr)
			},
			hiddenTrafficFn() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 上传历史记录
			uploadHistoryFn(obj) {
				uni.$u.http.post('/device/current_meter_record/add', obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '上传成功',
							duration: 1500
						});
						setTimeout(() => {
							this.hiddenTrafficFn()
						}, 500)
					} else {
						this.toastFn(res.msg)
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 计算流量
			calculateFlow() {
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'error',
						title: '未获取水深',
						duration: 1500
					});
					return
				}
				let vls = this.measuringArr
				// console.log('vls', vls);
				let vlAll = []
				let vl0 = null //区域流量
				let vl1 = null //区域流量
				let vlz = null //区域流量
				let vln = null //区域流量
				let vln1 = null //区域流量
				let vln2 = null //区域流量

				// 不参与循环
				// cot
				let sin27LL = Math.sin(this.cezhanObj.lSA * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA * Math.PI / 180)
				let areaLL = cos27LL / sin27LL //三角面积L

				let sin27RR = Math.sin(this.cezhanObj.rSA * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA * Math.PI / 180)
				let areaRR = cos27RR / sin27RR //三角面积R
				// VL0
				vl0 = 0.5 * this.wD * this.wD * areaLL * (vls[0].aveTy * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1)

				console.log('vl0', vl0);

				//VL1
				vl1 = 0.5 * [(vls[0].aveTy * 1) + (vls[0].aveTy * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1)

				console.log('vl1', vl1);

				// 中间逻辑
				if (vls.length > 1) {
					for (let i = 0; i < vls.length - 1; i++) {
						vlz = 0.5 * [(vls[i].aveTy * 1) + (vls[i + 1].aveTy * 1)] * (this.wD) * [(this.cezhanObj
							.cexianlist[i + 1].cR * 1) - (this.cezhanObj.cexianlist[i].cR *
							1)]
						vlAll.push(vlz.toFixed(6) * 1)
					}
				}

				//VLN+1
				vln1 = 0.5 * [(vls[vls.length - 1].aveTy * 1) + (vls[vls.length - 1]
					.aveTy * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length - 1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1)

				console.log('vln1', vln1, this.cezhanObj.cexianlist);

				//VLN+2
				vln2 = 0.5 * this.wD * this.wD * areaRR * (vls[vls.length - 1].aveTy * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1)

				console.log('vln2', vln2);

				// 计算总平均流速
				let vlQitem = []
				let vlQArr = []
				let vlQALL = []

				let sum = 0;
				for (let i = 0; i < vlAll.length; i++) {
					sum += vlAll[i];
				}
				this.liusliangnub = sum.toFixed(3) * 1
			},
			// 生Id
			nanoid(size = 21) {
				let id = ''
				let i = size
				while (i--) {
					id += this.urlAlphabet[(Math.random() * 64) | 0]
				}
				return id
			},
		}
	}
</script>
<style scoped lang="scss">
	// 计算流量
	.viewHistory_flow_rate {
		width: 700rpx;
		// height: 1600rpx;
		overflow: auto;
		// padding: 50rpx 30rpx 30rpx 30rpx;
		margin: 0 auto;

		.depth_water {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 50rpx;
			background-color: #ffffff;
			margin: 20rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;

			.water_a {
				width: 300rpx;
			}
		}

		.butflx {
			margin-top: 50rpx;
		}
	}
</style>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>